<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>titap 配置 - itxst.com</title>
    <meta name="keywords" content="titap 配置" />
    <meta name="description" content="本文将讲解如何配置 tiptap 编辑器，其中包括如何初始化、加载配置扩展、样式的配置方法。" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta http-equiv="Content-Language" content="zh-CN">
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
    <link href="/css/zt.css?ver=1.6.6" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" language="javascript" src="/js/jquery.js?ver=1.6.6"></script>
    <script type="text/javascript" src="/js/highlight/highlight.min.js?ver=1.6.6"></script>
    <link rel="stylesheet" type="text/css" href="/js/highlight/styles/vs2015x.css?ver=1.6.6">
    <script type="text/javascript" language="javascript" src="/js/comm.js?ver=1.6.6"></script>
    <script type="text/javascript" language="javascript" src="/js/zt.js?ver=1.6.6"></script>
    <script type="text/javascript" charset="utf-8" src="/js/layer/layer.js?ver=1.6.6"></script>
    <link rel="alternate" media="only screen and(max-width: 640px)" href="http://m.itxst.com/tiptap/settings.html" >
    <!--[if lte IE 9]>
    <script src="/js/respond/respond.js?ver=1.6.6"></script>
    <![endif]-->
</head>
<body>
    <div class="body"  >
        <div class="header">
            <div class="naver">
                <div class="logo">
                    <a href="/"><img src="/img/logov31.png" /></a>
                </div>
                <div class="naver-left">
                 <a href="/tiptap/tutorial.html">tiptap 中文文档</a>
                </div>
                <div class="naver-search">
                    <div class="naver-search-txt">
                        <input type="text" id="keyword" placeholder="Please enter the keyword" data-topic="tiptap">
                    </div>
                    <div class="naver-search-btn"><a href="javascript:void(0)" onclick="Search()">Search</a></div>
                </div>
                 <div class="naver-right"> 
                        <a href="/ag-grid/tutorial.html">AG-GRID</a> 
                        <a href="/tiptap/tutorial.html">Tiptap</a> 
                        <a href="/css-flex/tutorial.html">CSS-FLEX</a> 
                        <a href="/Bootstrap-Table/QuickStart.html">Bootstrap-Table</a> 
                </div>
            </div>
            <div class="path">
                
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="pagew">
        <div class="page" >
            <div class="page-body">
                <div class="content-detail">
                    <h1>titap 配置</h1>
               
               <p class="p">本文将讲解如何配置 <strong>tiptap</strong> 编辑器，其中包括如何初始化、加载配置扩展、样式的配置方法。<br/></p><h2>element</h2><p class="pe">将来编辑器绑定到制定的元素，可以通过 <strong>DOM</strong> 选择器 <strong>querySelector</strong> 选择，可以通过元素的id、class、 类型、属性、属性值等来选取元素，<strong>vue</strong> 中并不需要去配置这个属性。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// tiptap 中文文档 
// https://www.itxst.com/tiptap/tutorial.html
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

new Editor({
  element: document.querySelector('.element'),
  extensions: [
    StarterKit,
  ],
})
// 你也可以在 编辑器初始化之前挂载到容器中
yourContainerElement.append(editor.options.element)</code></pre><h2>extensions</h2><p>你可以将需要将扩展作为列表传递给编辑器。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// 使用默认扩展
new Editor({
  extensions: [
    StarterKit,
  ]
})

// 使用默认扩展和其他扩展
new Editor({
  extensions: [
    StarterKit,
    Document,
    Paragraph,
    Text,
  ]
})

// 使用高亮
new Editor({
  extensions: [
    StarterKit,
    Highlight,
  ],
})</code></pre><h2>content</h2><p class="pe">设置编辑器的默认内容，可以是<strong>json</strong>或者<strong>html</strong>格式。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

//通过html设置编辑器初始化内容
new Editor({
  content: `&lt;p&gt;Example Text&lt;/p&gt;`,
  extensions: [
    StarterKit,
  ],
})

//通过json设置编辑器初始化内容
new Editor({
  content: {"type":"doc",
         "content":[{"type":"paragraph",
         "content":[{"type":"text","text":"itxst.com"}]}]},
  extensions: [
    StarterKit,
  ],
})</code></pre><h2>editable</h2><p class="pe">设置编辑器的读写权限，<strong>true</strong>可编辑 <strong>flase</strong>只读</p><pre class="brush:js;toolbar:false"><code class="language-javascript">import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

new Editor({
  content: `&lt;p&gt;Example Text&lt;/p&gt;`,
  extensions: [
    StarterKit,
  ],
  editable: false, // false 只读 true可编辑
})</code></pre><h2>autofocus</h2><p>设置编辑器是否获取焦点或设置光标的位置</p><div class="xst-table"><table interlaced="enabled"><tbody><tr class="ue-table-interlace-color-single firstRow"><th style="border-color: rgb(221, 221, 221); word-break: break-all;">值<br/></th><th style="border-color: rgb(221, 221, 221); word-break: break-all;">说明</th></tr><tr class="ue-table-interlace-color-double"><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">start</td><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">设置光标在编辑器文档的最前面</td></tr><tr class="ue-table-interlace-color-single"><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">end</td><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">设置光标在编辑器文档的最后面</td></tr><tr class="ue-table-interlace-color-double"><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">all</td><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">选中全部文档</td></tr><tr class="ue-table-interlace-color-single"><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">Number</td><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">比如设置2，那么光标在文档的第二个字符后面</td></tr><tr class="ue-table-interlace-color-double"><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">true</td><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">编辑器获得焦点，光标位置为默认位置</td></tr><tr class="ue-table-interlace-color-single"><td valign="top" colspan="1" rowspan="1" style="border-left-color: rgb(221, 221, 221); border-top-color: rgb(221, 221, 221); word-break: break-all;">false<br/></td><td valign="top" colspan="1" rowspan="1" style="border-left-color: rgb(221, 221, 221); border-top-color: rgb(221, 221, 221); word-break: break-all;">编辑器不获取焦点</td></tr><tr class="ue-table-interlace-color-double"><td valign="top" colspan="1" rowspan="1" style="word-break: break-all;">null</td><td valign="top" colspan="1" rowspan="1" style="word-break: break-all;">编辑器不获取焦点</td></tr></tbody></table></div><pre class="brush:js;toolbar:false"><code class="language-javascript">import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

new Editor({
  extensions: [
    StarterKit,
  ],
  autofocus: false,
})
// vue3 例子
const state = reactive({
  editor: new Editor({
    content: "&lt;p&gt;Tiptap 中文文档 www.itxst.com&lt;/p&gt;",
    extensions: [
      StarterKit,
      TextStyle,
      Color.configure({
        types: ["textStyle"],
      }),
    ],
    autofocus: true, // 设置获取焦点
    editable: true,
  }) as any, 
});</code></pre><h2>enableInputRules</h2><p class="pe">默认情况下开启所有输入规则，你可以通过<strong>enableInputRules</strong>自定义输入规则，比如输入网址自动加上链接、输入数字自动加下划线。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// vue3 输入数字自动加下划线的例子
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import { Editor, EditorContent } from "@tiptap/vue-3";
import StarterKit from "@tiptap/starter-kit"; 
import Strike from '@tiptap/extension-strike'
import { markInputRule } from '@tiptap/core' 

//我们自定义了Strike扩展的输入规则，输入数字时自动加上下划线
const inputRegex = /^[0-9]+$/
const CustomStrike = Strike.extend({
  addInputRules() {
    return [
      markInputRule({
        find: inputRegex,
        type: this.type,
      }),
    ]
  },
})

const state = reactive({
  editor: new Editor({ 
    content: "&lt;p&gt;Tiptap 中文文档，回车输入数字看看效果&lt;/p&gt;",
    extensions: [
      StarterKit, 
      CustomStrike, 
    ], 
    //默认是允许所有的输入规则，下面设置只允许 CustomStrike
    enableInputRules: [CustomStrike],
  }) as any,
  result: "",
});</code></pre><h2>enablePasteRules</h2><p class="pe">默认情况下开启所有粘贴规则，你可以通过<strong>enablePasteRules</strong>自定义粘贴规则。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// 禁用全部粘贴规则
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

new Editor({
  content: `&lt;p&gt;Example Text&lt;/p&gt;`,
  extensions: [
    StarterKit,
  ],
  enablePasteRules: false,
})</code></pre><p>指定某个扩展开启粘贴规则</p><pre class="brush:js;toolbar:false"><code class="language-javascript">import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import Link from '@tiptap/extension-link'

new Editor({
  content: `&lt;p&gt;Example Text&lt;/p&gt;`,
  extensions: [
    StarterKit,
    Link,
  ],
  // pass an array of extensions or extension names
  // to allow only specific paste rules
  enablePasteRules: [Link, 'horizontalRule'],
})</code></pre><h2>injectCSS</h2><p class="pe">注入默认的样式，你可以设置<strong>false</strong>禁止注入默认样式</p><pre class="brush:js;toolbar:false"><code class="language-javascript">import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

new Editor({
  extensions: [
    StarterKit,
  ],
  injectCSS: false,
})</code></pre><h2>injectNonce</h2><p class="pe">将内容安全策略与<strong>nonce</strong>一起使用时，运行以下是一个示例，按浏览器<strong>F12</strong>你会在网页的<strong>head</strong>里面看到动态插入的<strong>noce</strong>。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

new Editor({
  extensions: [
    StarterKit,
  ],
  injectCSS: true,
  injectNonce: "your-nonce-here"
})</code></pre><h2>editorProps</h2><p class="pe">高级用法，传递给<strong>ProseMirror</strong>覆盖编辑器的<strong>dom</strong>属性事件</p><pre class="brush:js;toolbar:false"><code class="language-javascript">new Editor({
  // 更多资料: https://prosemirror.net/docs/ref/#view.EditorProps
  editorProps: {
    attributes: {
      class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none',
    },
    transformPastedText(text) {
      return text.toUpperCase()
    }
  }
})</code></pre><h2>parseOptions</h2><p>您可以传递<strong>parseOptions</strong>，然后由<strong>ProseMirror</strong>处理。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">new Editor({
  // Learn more: https://prosemirror.net/docs/ref/#model.ParseOptions
  parseOptions: {
    preserveWhitespace: 'full',
  },
})</code></pre>
 
               <h2>
    下载教程 Demo
</h2>
<p class="pe">
   本教程<b>Demo</b>的源码点击这里下载，<a href="https://img1.itxst.com/8/c/8c32fcdc12cb8847c62e405be8a73835.zip" target="_blank" textvalue="Tiptap Demo">Tiptap Demo</a>，下载完成后运行<b>npm i</b>初始化依赖包。
</p>
                </div>
                <div class="content-r">   <a href="/tiptap/tutorial.html" target="_self">
                     <img src="https://img1.itxst.com/0/9/09355b3592a0c16799b504a9f2a70303.png" alt="tiptap 中文文档" />
                    </a>                                                <a href="//www.itxst.com/vue-draggable/tutorial.html" target="_blank">
                                <img src="//img1.itxst.com/b/f/bf9af8368dfac84cd703ef54e1e89d14.png" alt="vue.draggable" />
                            </a>
 
                </div>
            </div>
            <div class="home-menu scroll">
                <div class="tree">
      <a data-level="1" class="leve-1   doc-1   " href="/tiptap/tutorial.html" title="tiptap 中文文档">快速入门</a>
      <a data-level="1" class="leve-1    arrow-1" href="/tiptap/configuration.html" title="Guide 向导">Guide 向导</a>
      <a data-level="1" class="leve-1    arrow-2" href="/tiptap/api.html" title="tiptap api 列表">API 列表</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/methods.html" title="tiptap editor 方法">tiptap 方法</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/attrs.html" title="tiptap 属性">tiptap 属性</a>
      <a data-level="2" class="leve-2   doc-1    doc-2 " href="/tiptap/settings.html" title="titap 配置">titap 配置</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/uaqmeemr.html" title="tiptap commands 命令">commands 命令</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/363qzvqv.html" title="nodes 节点">nodes 节点</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/marks.html" title="tiptap marks 标记">marks 标记</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/extensions.html" title="tiptap extensions 扩展">extensions 扩展</a>
                 </div>
                 <div  class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>
           <div class="footer">
© 2023 itxst.com All rights reserved.
</div>

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?7e15ed96eb8133218e99de8bc1f5cb61";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
       </div>
    </div> 
</body>
</html>
